<template>
<div class="slider">
    <div class="slider__line" ref="lineRef"></div>
    <div class="slider__bar" ref="barRef" :style="{left: barLeftStyle}"></div>
    <div class="slider__fill_line" ref="fileLineRef" :style="{width: fillLineWidthStyle}"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'

import throttle from 'lodash/fp/throttle'

import './Slider.scss'

const props = defineProps({
    min: {
        type: Number,
        default: 0
    }, 
    max: {
        type: Number,
        default: 1
    },
    value: {
        type: Number,
        default: 0
    },
    disabled: Boolean
})

const lineRef = ref(null)
const barRef = ref(null)
const fileLineRef = ref(null)

const barLeftStyle = computed(() => toPercentage((props.max-props.value)/props.max))
const fillLineWidthStyle = computed(() => toPercentage(props.value/props.max))

const toPercentage = (decimalValue: number, precision: number = 2) => (decimalValue * 100).toFixed(precision) + '%'

onMounted(() => {
    console.log(throttle)
    window.addEventListener('resize', resizeEvent)
})

const resizeEvent = () => {
    console.log('resizeEvent')

    console.log(lineRef.value.offsetWidth)
    console.log(barRef.value.offsetWidth)
    console.log(fileLineRef.value.offsetWidth)
}



</script>
